<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <% Ajax.RenderResources<CollapsiblePanelExtender>(); %>
    <% Ajax.RenderResources<PopupControlExtender>(); %>
    <!-- Ok, lets some jquery fun -->
    <link type="text/css" href="/Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

    <script type="text/javascript" src="/Scripts/jquery-1.3.2.js"></script>

    <script type="text/javascript" src="/Scripts/jquery-ui-1.7.2.custom.min.js"></script>

    <script type="text/javascript">
        //<![CDATA[

        $(function() {
            $('#DatePicker').datepicker({
                inline: true,
                onSelect: function(dateText, inst) {
                    $("#clientAction").val("SelectDate");
                    $('#ReminderDate').val(dateText);
                    document.ReminderDateForm.onsubmit();
                }
            });
        });

        // certainly we can set date and message on client (in real applications probably you would), but this sample demostrates client-server interoperation
        function OnRadioButtonClick(radioButton) {
            $("input[type='radio']").attr({ checked: false });
            $("#ReminderMessage").val(radioButton.name);
            $("#clientAction").val("SelectMessage");
            setTimeout(function() { radioButton.checked = true; }, 0);
            document.ReminderDateForm.onsubmit();
        }
        //]]>
    </script>

</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    PopupControl Demonstration
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="demoarea">
        <div id="test">
        </div>
        <div class="demoheading">
            PopupControl Demonstration</div>
        <%using (Ajax.BeginForm("Index", null, new AjaxOptions { UpdateTargetId = "ReminderControl" }, new { id = "ReminderDateForm", name = "ReminderDateForm" }))
          { %>
        <input name="clientAction" id="clientAction" type="hidden" />
        Enter date for new reminder:
        <%= Html.TextBox("DateTextBox", ViewData["DateTextBox"], new { style = "width: 80px;", autocomplete = "off" })%><br />
        <br />
        <input type="hidden" name="reminderDate" id="ReminderDate" />
        <div id="DatePicker" class="popupControl">
        </div>
        <% Ajax.RegisterScript(new PopupControlExtender("DateTextBox")
           {
               PopupControlID = "DatePicker",
               Position = PopupControlPopupPosition.Bottom,
           }); 
        %>
        Reminder message:
        <%= Html.TextBox("MessageTextBox", ViewData["MessageTextBox"], new { style = "width: 200px;", autocomplete = "off" })%><br />
        <br />
        <div id="MessagePicker" class="popupControl">
            <div style="border: 1px outset white; width: 100px">
                <%= Html.RadioButton("WalkDog", false, new { onclick = "javascript:OnRadioButtonClick(this)" })%>
                <label for="WalkDog">
                    Walk dog</label><br />
                <%= Html.RadioButton("FeedDog", false, new { onclick = "javascript:OnRadioButtonClick(this)" })%>
                <label for="FeedDog">
                    Feed dog</label><br />
                <%= Html.RadioButton("FeedCat", false, new { onclick = "javascript:OnRadioButtonClick(this)" })%>
                <label for="FeedCat">
                    Feed cat</label><br />
                <%= Html.RadioButton("FeedFish", false, new { onclick = "javascript:OnRadioButtonClick(this)" })%>
                <label for="FeedFish">
                    Feed fish</label><br />
                <%= Html.RadioButton("Cancel", false, new { onclick = "javascript:OnRadioButtonClick(this)" })%>
                <label for="Cancel">
                    Cancel</label><br />
            </div>
        </div>
        <input type="hidden" name="ReminderMessage" id="ReminderMessage" />
        <% Ajax.RegisterScript(new PopupControlExtender("MessageTextBox")
           {
               PopupControlID = "MessagePicker",
               Position = PopupControlPopupPosition.Bottom,
               CommitScript = "e.value += ' - do not forget!';"
           }); 
        %>
        <input type="submit" value="Add reminder" onclick="javascript:$('#clientAction').val('Submit')" />
        <div id="ReminderControl">
            <% Html.RenderPartial("ReminderControl"); %>
        </div>
        <% } %>
    </div>
    <div class="demobottom">
    </div>
    <div id="Description_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Description_ToggleImage" src="/Content/Images/collapse.jpg" alt="collapse" />
            PopupControl Description
        </div>
    </div>
    <div id="Description_ContentPanel" style="overflow: hidden;">
        <p>
            PopupControl is an ASP.NET AJAX extender that can be attached to any control in
            order to open a popup window that displays additional content. This popup window
            will probably be interactive and will probably be within an ASP.NET MVC Ajax Form,
            so it will be able to perform complex server-based processing (including postbacks)
            without affecting the rest of the page. The popup window can contain any content,
            HTML elements, etc. Once the work of the popup window is done, a simple server-side
            call dismisses it and triggers any relevant script on the client to run and update
            the page dynamically.
        </p>
        <br />
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Description_ContentPanel")
       {
           ExpandControlID = "Description_HeaderPanel",
           CollapseControlID = "Description_HeaderPanel",
           Collapsed = false,
           ImageControlID = "Description_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
    <div id="Properties_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Properties_ToggleImage" src="/Content/Images/expand.jpg" alt="expand" />
            PopupControl Properties
        </div>
    </div>
    <div id="Properties_ContentPanel" style="overflow: hidden; height: 0px">
        <p>
            The control above is initialized with this code. The <em>italic</em> properties
            are optional:
        </p>
        <pre>Ajax.RegisterScript(new PopupControlExtender("DateTextBox") {
    PopupControlID="Panel1",
    <em>Position</em>="Bottom" } );</pre>
        <ul>
            <li><strong>Constructor parameter</strong> - The ID of the control to attach to</li>
            <li><strong>PopupControlID</strong> - The ID of the control to display</li>
            <li><strong>Position</strong> - Optional setting specifying where the popup should be
                positioned relative to the target control. (Left, Right, Top, Bottom, Center)</li>
            <li><strong>CommitProperty</strong> - Optional setting specifying the property on the
                control being extended that should be set with the result of the popup</li>
            <li><strong>CommitScript</strong> - Optional setting specifying additional script to
                run after setting the result of the popup</li>
            <li><strong>OffsetX/OffsetY</strong> - The number of pixels to offset the Popup from
                its default position, as specified by Position.</li>
            <%-- 
            <li><strong>Animations</strong> - Generic animations for the PopupControlExtender.  See the
                <a href="../Walkthrough/UsingAnimations.aspx">Using Animations</a> walkthrough and
                <a href="../Walkthrough/AnimationReference.aspx">Animation Reference</a> for more details.
                <ul>
                    <li><strong>OnShow</strong> - The OnShow animation will be played each time the popup is displayed.
                        The popup will be positioned correctly but hidden.  The animation can use
                        <span class="codeReference">&lt;HideAction Visible="true" /&gt;</span>
                        to display the popup along with any other visual effects.</li>
                    <li><strong>OnHide</strong> - The OnHide animation will be played each time the popup is hidden.</li>
                </ul>
            </li>
            --%>
        </ul>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Properties_ContentPanel")
       {
           ExpandControlID = "Properties_HeaderPanel",
           CollapseControlID = "Properties_HeaderPanel",
           Collapsed = true,
           ImageControlID = "Properties_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
</asp:Content>
